<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>联系我们</title>
  <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <style type="text/css">
    body{
      /*background-color: #f4642e;*/
      height: 90vh;
      font-size: 12px;
    }

    #divInput{
      position: absolute;
      left: 50%;
      margin-left: -120px;
      top: 20%;
      width: 300px;
      text-align: center;
      /*height: 200px;*/
    }
    #divInput input{
      width: 140px;
    }
    #errorMsg{
      color:red;
    }
    .title-view{
      position: relative;width: 80%;
      text-align: center;color:#df5000;font-size:30px;font-weight:bold;
    }
    .title-view label{
      font-size:13px;
    }
    .regBtn{
      border: 0;
      background-color: #df5000;
      color: white;
      border-radius: 5px;
      width: 100px;
      height: 30px;
    }
    .sendCodeBtn{
      font-size: 11px;
      border: 0;
      background-color: #df5000;
      color: white;
      border-radius: 5px;
      width: 74px;
      height: 25px;
    }
    .table{
      line-height: 35px;
    }
    .input-view{
      height: 25px;
    }
  </style>

</head>
<body>

<div id="lottery">
  <div id="divInput">
    <div class="title-view">联系我们</div>
    <div class="title-view" style="margin-top: 100px;">
      <input class="input-view" id="name" placeholder="姓名"></input>
    </div>
    <div class="title-view" style="margin-top: 30px;">
      <input class="input-view" id="phone" maxlength="11" placeholder="联系电话"></input>
    </div>

    <div class="title-view" style="margin-top: 10px;">
      <label id="errorMsg"></label>
    </div>
    <div class="title-view" style="margin-top: 20px;">
      <button class="regBtn" onclick="submitOp()" style="font-weight: bold;"> 马 上 提 交 </button>
    </div>


    <div class="title-view" style="margin-top: 30px;">
      <label>请准确填写信息，我们会及时和您联系</label><br/>
      <label>联系我们：400-686-0633</label>
    </div>
  </div>
</div>

<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">

  function submitOp() {
    var name = $("#name").val();
    if(name == undefined || name == ''){
      $("#errorMsg").text("请输入您的姓名");
      return;
    }


    var phone = $("#phone").val();
    if(phone == undefined || phone == ''){
      $("#errorMsg").text("请输入手机号");
      return;
    }

    if(phone.length != 11){
      $("#errorMsg").text("请输入正确手机号");
      return;
    }

    var param = {
      "phone_num":phone,
      "real_name": name
    };

    $.ajax({
      url: "https://www.caihengyun.com/api/user/add/mp/web",
      type: "post",
      dataType: "json",
      data:JSON.stringify(param),
      contentType : "application/json;charset=utf-8",
      success(res) {
        $("#errorMsg").text(res.msg);
      }
    });
  }
</script>
</body>
</html>
